Bootstrap Snippet Grid boxes using HTML CSS Bootstrap

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
      <title>Box my flight search</title>
      <!-- Bootstrap -->
      <link href="css/bootstrap.min.css" rel="stylesheet">
      <link href="css/style.css" rel="stylesheet">
      <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
      <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
      <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
      <![endif]-->
   </head>
   <body>
      <div class="wraper">
         <main>
            <!-- <div class="container"> -->
            <div class="box-section">
               <!-- <div class="row"> -->
               <div class=" col-lg-4 col-lg-4 col-lg-4 col-lg-4">
                  <div class="box">
                     <img src="https://images.sftcdn.net/images/t_optimized,f_auto/p/94bb61bc-96db-11e6-8bc1-00163ec9f5fa/468969178/weather-desktop-background-changer-logo.png" alt="view"/>
                     <h3><span class="flight">Lorem</span> Ipsum Ipsum</h3>
                     <h4>TITLE HERE</h4>
                     <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
                     <button type="button">MYFLIGHTSEARCH</button>
                  </div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
*{ margin:0; padding:0;}
.wraper ,main ,.box-section ,.box{float:left;width:100%;background:  #000;color:  #fff;padding: 20px 0px;}
.box{border: 1px solid #afacac;margin:0 auto;text-align:center;border-radius: 5px;}
.box h3{margin:0;font-weight:  600;line-height: 40px;border-bottom: 1px solid #afacac;}
.flight{ color:#00638c;}
.box p{text-align:left;padding: 20px;margin:  0;}
.box button{border:none;background:  #00638c;color:  #fff;outline:  none;border-radius:  4px;padding: 7px 10px;font-size:  18px;margin-bottom: 20px;}
.box h4{margin:0;margin-top: 15px;}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Grid boxes"
Bootstrap 3.1.0 Snippet by Ashwani Rawat

Related: See More

Questions / Comments:

"Grid boxes" Bootstrap 3.1.0 Snippet by Ashwani Rawat

Related: See More

Questions / Comments:

"Grid boxes"
Bootstrap 3.1.0 Snippet by Ashwani Rawat